<!--
 * @Descripttion: 
 * @version: 
 * @Author: Terry
 * @Date: 2020-06-04 17:18:56
 * @LastEditors: Terry
 * @LastEditTime: 2024-09-12 18:55:39
-->
<template>
  <div >
    <el-container @click.native="handleTime">
      <el-header class="p-0" style="z-index:999;">
        <navbar
          style="position: fixed;background:#1890FF; width:100%;z-index:2500;min-height:60px"
        ></navbar>
      </el-header>
      <el-aside width="100%" class="m-b-10 hidden-md-and-up">
        <auxAside class="sidebar-container w-100"></auxAside>
      </el-aside>

      <el-container style="background:#f8f8f8">
        <el-aside
          :width="isMain === false ? '200px' : '60px'"
          class="hidden-md-and-down"
        >
          <auxAside
            ref="aside"
            style="position: fixed;"
            class="sidebar-container"
            @upMain="upMain"
          ></auxAside>
        </el-aside>

        <el-main :class="['p-b-0' ,'main-container',this.$store.state.showPopUp ? '' : 'overflow-hidden']" >
          <div class="AUX-common-layout" >
            <div class="AUX-common-layout-center  AUX-flex-main" >
              <breadcrumb/>
              <transition name="el-fade-in-linear" mode="out-in">
                <router-view  :key="key"  ref="routerView"></router-view>
              </transition>
              </div>
            </div>
          <!-- <foot></foot> -->
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import breadcrumb from "../components/breadcrumb.vue";
export default {
  computed: {
    key() {
      return this.$route.path
    },
    showPopUp(){
      console.log(12); 
    }
  },
  components: {
    breadcrumb
  },
  watch:{

  },  
  data() {
    return {
      firstTime: new Date().getTime(),
      isMain: false,
    };
  },
  methods: {
    upMain(data) {
      this.isMain = data;
    },
    handleTime() {
      let firstTime = this.firstTime,
        lastTime = new Date().getTime(),
        timeOut = 30 * 60 * 1000;
      if (lastTime - firstTime > timeOut) {
        this.$message.error(this.$t('global.userInactive'));
        // var lang = localStorage.getItem('language');
        sessionStorage.clear();
        // sessionStorage.setItem('language',lang);
        this.$router.push({ name: "login" });
      } else {
        this.firstTime = lastTime;
      }
    },
  },
  mounted() {
    console.log(document.documentElement.scrollHeight, window.innerHeight);
    document.addEventListener("scroll",() => {
        console.log('Scroll Y:', window.scrollY);
    })
    // this.setMenuKey(this.$route.path)
  },
};
</script>

<style scoped>
.main-container {
  height: calc(100vh - 80px) !important;
  /* position: relative; */
}

.sidebar-container {
  padding-top: 60px;
  top: 0;
  bottom: 0;
  left: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.sidebar-container::-webkit-scrollbar {
  display: none;
}
.el-container {
  min-height: calc(100vh - 60px);
}
.el-aside {
  background: rgb(248, 248, 248);
}
.isActive {
  margin-left: 64px;
}
.el-main {
  transition: all 0.3s !important;
}

>>> .el-aside {
  transition: width 0.4s;
  -webkit-transition: width 0.4s;
  -moz-transition: width 0.4s;
  -webkit-transition: width 0.4s;
  -o-transition: width 0.4s;
}

.overflow-hidden{
  overflow: hidden;
}
</style>